<template>
    <div class="goods_list">
        <div class="goods_data" v-if="!visible">
            <div class="goods_head">
                <div class="goods_head_search">
                    <a-input v-model:value="tableQuery.blurry" allow-clear :placeholder="t('yl.goodsSearch')" />
                    <a-button type="primary" @click="getskuGoodsSkuList(tableQuery)">搜索</a-button>
                </div>
                <div class="goods_head_btn">
                    <a-button type="primary" @click="handFun('clear')">清空商品</a-button>
                    <a-button type="danger" @click="handsyncFun">同步总部商品</a-button>
                    <a-button type="danger" @click="handFun('Export')">批量导出</a-button>
                    <a-button type="danger" @click="handleImport">批量导入</a-button>
                    <a-button type="danger" @click="handleAdd">新增商品</a-button>
                </div>
            </div>

            <div class="user-data__table">
                <a-table
                    :columns="columns"
                    :data-source="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    :row-key="setRowKey"
                    @change="handleTableChange"
                    :scroll="{ x: 1080, y: 540 }"
                >
                    <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                        <span>{{ t(`yl.${item.slotName}`) }}</span>
                    </template>

                    <template #customAction="{ record }">
                        <a-button class="action-btn" @click="handleEdit(record, 'details')" type="primary" size="small">
                            <template #icon>
                                <PicLeftOutlined />
                            </template>
                        </a-button>
                        <a-button class="action-btn" @click="handleEdit(record, 'edit')" type="primary" size="small">
                            <template #icon>
                                <EditOutlined />
                            </template>
                        </a-button>
                        <a-popconfirm placement="topRight" @confirm="handleDelete(record.id)">
                            <template #title>
                                <p>{{ t('yl.deleteConfirmtext') }}</p>
                            </template>
                            <a-button class="action-btn" type="danger" size="small">
                                <template #icon>
                                    <Delete />
                                </template>
                            </a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>
        </div>
        <list-form v-if="visible" :row="selectedRow" :showType="showType" @submit="listFormSubmit"></list-form>

        <importModel
            :visible="importVisible"
            :loading="importLoading"
            :title="importTitle"
            @cancle="handleImportCancle"
            @submit="handleimportSubmit"
        ></importModel>
        <yl-paw-model
            :visible="pawVisible"
            :loading="pawLoading"
            :title="pawTitle"
            :pawId="pawId"
            :notesTitle="notesTitle"
            :type="type"
            :userType="userType"
            :password="password"
            @cancle="handlePawCancle"
            @submit="handlePawSubmit"
        ></yl-paw-model>
        <a-modal
            v-model:visible="syncModal"
            :title="t('yl.goodsSyncMerchan')"
            :width="420"
            :destroyOnClose="true"
            :maskClosable="false"
            @ok="onSubmit"
            @cancel="handleCancle"
        >
            <span style="color: #f00">{{ t('yl.goodsSyncDesc') }}</span>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref, UnwrapRef, reactive, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import { message, Modal } from 'ant-design-vue';
import columns from './listColumns';
import listTable from './listTable';
import listForm from './components/listForm.vue';
import importModel from '@/components/importModel.vue';
import ylPawModel from './components/pawModel.vue';
import { deleteskuGoodsSku } from '@/api/goods';
import { postConfirmPass } from '@/api/user/index';
import { encrypt } from '@/utils';

// 表单校验规则
const initRules = (t: fn) => {
    return {
        pass: [{ required: true, message: t('yl.Password'), trigger: 'blur' }],
    };
};
interface FormState {
    pass: string;
}
// interface State {
//     modalTitle: string;
//     confirmLoading: boolean;
//     selectedNodeKeys: (string | number)[];
// }
export default defineComponent({
    name: 'list',
    components: { listForm, importModel, ylPawModel },

    setup() {
        const { t } = useI18n();
        const syncModal = ref(false);
        const formState: UnwrapRef<FormState> = reactive({
            pass: '',
        });
        let { getskuGoodsSkuList, tableQuery, visible } = listTable;
        onMounted(async () => {
            getskuGoodsSkuList(tableQuery);
        });
        const importModel = reactive({
            importVisible: false,
            importLoading: false, // 弹窗按钮的loading
            importTitle: t('yl.goodsAllImportMerchan'),
        });
        const paw = reactive({
            pawVisible: false,
            pawLoading: false, // 弹窗按钮的loading
            pawTitle: '冻结商户',
            notesTitle: '注：冻结后该商户无法使用',
            type: '1',
        });
        onUnmounted(async () => {
            // visible = false;
            console.log(visible.value);
            visible.value = false;
        });
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;
        const handleDelete = (id: number | string) => {
            deleteskuGoodsSku([id]).then(() => {
                message.success(t('yl.deleteSuccess'));

                const timer = window.setTimeout(() => {
                    getskuGoodsSkuList(tableQuery);
                }, 1000);
            });
        };
        // 批量导出
        const handFun = (type: string) => {
            paw.pawVisible = true;
            paw.pawTitle = type == 'clear' ? t('yl.goodsClear') : t('yl.goodsExportMerchan');
            paw.notesTitle = type == 'clear' ? t('yl.goodsClearDesc') : t('yl.goodsExportMerchanDesc');
            paw.type = type;
        };

        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const handleExportModal = () => {
            formRef.value.validate().then(() => {
                postConfirmPass({ ...formState, pass: encrypt(formState.pass) });
                console.log('ddd');
            });
        };
        // 批量导入
        const handleImport = () => {
            importModel.importVisible = true;
        };
        const handleImportCancle = () => {
            importModel.importVisible = false;
        };
        const handleimportSubmit = () => {
            importModel.importVisible = false;
        };
        // 确认密码弹窗
        const handlePawCancle = () => {
            paw.pawVisible = false;

            paw.type = '';
        };
        // 确认密码弹窗
        const handlePawSubmit = () => {
            paw.pawVisible = false;
        };
        // 同步总部商品
        const handsyncFun = () => {
            syncModal.value = true;
        };

        //  let  content= [
        //      {
        //          picTypeClass:0,
        //         //  0图片
        //          [ {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "蔬菜",
        //           "picTypeCode": "ylbf44b741",
        //           "picTypeId": 1
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "水果",
        //           "picTypeCode": "yl64254630",
        //           "picTypeId": 2
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "生鲜",
        //           "picTypeCode": "yl811b1b6e",
        //           "picTypeId": 3
        //         }]
        //      },
        //      {
        //          picTypeClass:1,
        //           //  视频
        //          [ {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "蔬菜",
        //           "picTypeCode": "ylbf44b741",
        //           "picTypeId": 1
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "水果",
        //           "picTypeCode": "yl64254630",
        //           "picTypeId": 2
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "生鲜",
        //           "picTypeCode": "yl811b1b6e",
        //           "picTypeId": 3
        //         }]
        //      }
        //  ]

        //  let  content= [
        //      {
        //          picTypeClass:0,
        //         //  0-5
        //         //  0图片 视频  装饰  背景
        //          [ {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "蔬菜",
        //           "picTypeCode": "ylbf44b741",
        //           "picTypeId": 1
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "水果",
        //           "picTypeCode": "yl64254630",
        //           "picTypeId": 2
        //         },
        //         {
        //           "createdMerchantCode": "0",
        //           "picTypeClass": 0,
        //           "picTypeCname": "生鲜",
        //           "picTypeCode": "yl811b1b6e",
        //           "picTypeId": 3
        //         }]
        //      },

        //  ]

        return {
            syncModal,
            columns,
            setRowKey,
            handleDelete,
            t,
            ...listTable,
            handFun,
            handleExportModal,
            formRef,
            rules,
            formState,
            ...toRefs(importModel),
            ...toRefs(paw),
            handleImport,
            handleImportCancle,
            handleimportSubmit,
            handlePawCancle,
            handlePawSubmit,
            handsyncFun,
        };
    },
});
</script>

<style lang="scss" scoped>
.goods_head {
    @include flex;
    justify-content: space-between;
    padding-bottom: 20px;
    &-dept {
        flex-basis: 200px;
        min-width: 200px;
    }

    .goods_head_search {
        @include flex;
        .ant-btn {
            margin-left: 10px;
        }
    }
    .goods_head_btn {
        .ant-btn {
            margin-left: 10px;
        }
    }
}
</style>
